<template>
	<view class="content">
		<view class="fj">
			<view class="tit">
				<view class="txt">收藏电站</view>
			</view>
			<view class="list">
				<scroll-view scroll-y="true" @scrolltolower="lowerBottom" style="height:85vh;">
					<u-swipe-action>
						<u-swipe-action-item v-for="(item,index) in list" :key="index" :name="index" :options="options1"
							@click="del">
							<view class="item" @click="gotodetail(item.dpc.id)">
								<view class="title">{{item.dpc.title}}</view>
								<view class="desc">{{item.dpc.city}}{{item.dpc.address}}</view>
								<view class="txt">
									<view class="num">
										<text class="num-su" v-if="item.czdata.kx_num>0">闲</text>
										<text class="num-fa" v-if="item.czdata.kx_num==0">满</text>
										<text class="num-facc"
											v-if="item.czdata.kx_num==0">空闲{{item.czdata.kx_num}}个插座</text>
										<text class="num-succ"
											v-if="item.czdata.kx_num>0">空闲{{item.czdata.kx_num}}个插座</text>
										<text class="num-allcc">共{{item.czdata.num}}个插座</text>
									</view>
									<view class="detail">去充电</view>
									<view class="clear"></view>
								</view>
								<view class="map"></view>
							</view>
						</u-swipe-action-item>
					</u-swipe-action>
					<view class="medicine_title">
						{{isBottom?'没有更多数据了～':'下拉加载更多'}}
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	let that
	export default {
		data() {
			return {
				options1: [{
					text: '删除',

				}],
				list: [],
				currentpage: 1, //当前页码
				isBottom: false, //是否请求完毕数据
			}
		},
		onLoad() {
			this.listinit()
		},
		onShow() {

		},
		mounted() {
			that = this
		},
		computed: {
			...mapState(['loginState', 'userInfo'])
		},
		methods: {
			//数据初始化配置
			listinit() {
				this.isBottom = false
				this.getlist()
			},
			//收藏列表
			getlist() {
				this.$http_api.dpcsclist({
					uid: this.userInfo.id,
					page: this.currentpage
				}).then((res) => {
					that.list = that.list.concat(res)
					if (res.length == 0 || res.length < 10) {
						that.isBottom = true
					}
				})
			},
			// 滚到底部
			lowerBottom() {
				if (!this.isBottom) {
					this.currentpage += 1
					this.getlist()
				}
			},
			gotodetail(id){
				uni.navigateTo({
					url:"/pages/detail/detail-electromobile?id="+id
				})
			},
			// 删除收藏
			del: function(res) {
				var id = this.list[res.name].id
				this.list.splice(res.name, 1)
				this.$http_api.dpcscdel({
					id: id
				}).then((res) => {
					that.issc = res
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 0 3%;
		box-sizing: border-box;
	}

	.fj {
		padding-top: 60rpx;

		.tit {
			display: flex;
			justify-content: space-between;
			margin-bottom: 60rpx;

			.txt {
				font-size: 40rpx;
				font-weight: bold;
				padding-left: 20rpx;
				border-left: 3px solid #23BF61;
				line-height: 36rpx;
			}

			.more {
				font-size: 28rpx;
				color: #777;
			}
		}

		.list {
			.item {
				box-shadow: 0px 0px 6px #dfdfdf;
				padding: 20rpx;
				// margin-bottom: 40rpx;
				height: 204rpx;

				.title {
					font-size: 34rpx;
					font-weight: bold;
				}

				.desc {
					font-size: 30rpx;
					color: #333;
					margin-top: 10rpx;
					margin-bottom: 20rpx;
				}

				.txt {
					font-size: 26rpx;

					.num {
						float: left;
						margin-top: 6rpx;

						.num-su {
							padding: 4rpx 8rpx;
							background: #23BF61;
							color: #fff;
							border-radius: 6rpx;
							margin-right: 15rpx;
						}

						.num-fa {
							padding: 4rpx 8rpx;
							background: #f10000;
							color: #fff;
							border-radius: 6rpx;
							margin-right: 15rpx;
						}

						.num-succ {
							color: #23BF61;
						}

						.num-facc {
							color: #f10000;
						}

						.num-allcc {
							margin-left: 15rpx;
							padding-left: 15rpx;
							border-left: 1px solid #999;
						}
					}

					.detail {
						font-size: 28rpx;
						color: #23BF61;
						border: 1px solid #23BF61;
						border-radius: 40rpx;
						width: 130rpx;
						text-align: center;
						line-height: 46rpx;
						float: right;
					}
				}
			}
		}

		.medicine_title {
			font-size: 28rpx;
			color: #999;
			text-align: center;
			margin: 60rpx 0;
		}
	}
</style>